<template>
  <div id="app">
    <BatButton>确认</BatButton>
    <bat-search v-model="keyword"></bat-search>
    <bat-data-tag left="star" right="100"></bat-data-tag>
    <bat-input label="名称" :nullable="false" v-model="name"></bat-input>
    <bat-select size="mini" v-model="city" :options="cities" label="城市" option_label="name" option_value="id"
                :nullable="false"></bat-select>
  </div>
</template>

<script>
import BatButton from './components/BatButton'
import BatInput from './components/BatInput'
import BatSelect from './components/BatSelect'
import BatDataTag from "./components/BatDataTag";
import BatSearch from "./components/BatSearch";

export default {
  data() {
    return {
      name: 'asd',
      keyword: null,
      city: null,
      cities: [{name: '北京', id: 11}, {name: '上海', id: 12}, {name: '武汉', id: 13}]
    }
  },
  name: "app",
  components: {BatButton, BatInput, BatSelect, BatDataTag, BatSearch}
};
</script>

<style>

/*每个页面公共css */
* {
  margin: 0;
  padding: 0;
  /* css3盒子模型 */
  box-sizing: border-box;
}

/* 去掉li 的小圆点 */
li {
  list-style: none;
}

a {
  color: rgb(15, 15, 15);
  text-decoration: none;
}

img {
  /* border 0 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 */
  border: 0;
  /* 取消图片底侧有空白缝隙的问题 */
  vertical-align: middle;
}

#app {
  font-family: Arial, "微软雅黑";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /*  display: flex;
   justify-content: center; */
  /* width: 1200px; */
}

</style>
